/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from "react";
import {Button, Card, Col, Form, Row, Switch} from "antd";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {fetchData, receiveData} from "@/action";
import {delete_req, get, post_body} from "@/axios/tools";
import PhotoSwipe from "photoswipe";
import PhotoswipeUIDefault from "photoswipe/dist/photoswipe-ui-default";
import "photoswipe/dist/photoswipe.css";
import "photoswipe/dist/default-skin/default-skin.css";

class Gallery extends React.Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            imagePrefix: '',
            images: [],
            gallery: null,
            showDelete: false,
        };
    }

    componentWillMount() {
        this._requestImages();
        this.closeGallery();
    }

    _requestImages = () => {
        get('/image/items', {page: 1, pageSize: 100}).then(data => {
            console.log(' _requestImages    ', data);
            const images = data.data.list;
            console.log('  _requestImages  images ', images);
            this.setState({imagePrefix: data.baseUrl, images: images});
        });
    };


    componentDidMount() {
    }

    openGallery = (item) => {
        const items = [
            {
                src: item,
                w: 0,
                h: 0,
            }
        ];
        const pswpElement = this.pswpElement;
        const options = {index: 0};
        this.gallery = new PhotoSwipe(pswpElement, PhotoswipeUIDefault, items, options);
        this.gallery.listen('gettingData', (index, item) => {
            const _this = this;
            if (item.w < 1 || item.h < 1) { // unknown size
                var img = new Image();
                img.onload = function () { // will get size after load
                    item.w = this.width; // set image width
                    item.h = this.height; // set image height
                    _this.gallery.invalidateCurrItems(); // reinit Items
                    _this.gallery.updateSize(true); // reinit Items
                };
                img.src = item.src; // let's download image
            }
        });
        this.gallery.init();
    };
    closeGallery = () => {
        if (!this.gallery) return;
        this.gallery.close();
    };


    _deletePic = id => {
        delete_req('/image/item/' + id).then(data => {
            const images = this.state.images.filter(v => v.id !== id);
            this.setState({images});
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div style={{background: '#ECECEC', padding: '30px'}}>
                显示删除 <Switch defaultChecked={this.state.showDelete} onChange={e => this.setState({showDelete: e})}/>
                <div style={{marginBottom: '10px'}}></div>
                {
                    <Row gutter={16} key="row">
                        {this.state.images.map(v => {
                            const id = v.id;
                            const url = this.state.imagePrefix + `?fileName=${v.url}`;
                            return <Col style={{paddingBottom: '10px'}} className="gutter-row" span={4}
                                        key={id + 'col'}>
                                <Card bodyStyle={{padding: 10}} key={id + 'card'}>
                                    {this.state.showDelete ?
                                        <Button onClick={() => {
                                            this._deletePic(id);
                                        }
                                        } style={{position: 'absolute'}} type="danger" ghost>删除</Button> : null}
                                    <div className="custom-image">
                                        <img onClick={() => this.openGallery(url)} alt="example" width='100%'
                                             height="100%"
                                             src={url + `&width=320&height=180`}/>
                                    </div>
                                </Card>
                            </Col>
                        })}
                    </Row>
                }
                <div className="pswp" tabIndex="-1" role="dialog" aria-hidden="true" ref={(div) => {
                    this.pswpElement = div;
                } }>

                    <div className="pswp__bg"/>

                    <div className="pswp__scroll-wrap">

                        <div className="pswp__container">
                            <div className="pswp__item"/>
                            <div className="pswp__item"/>
                            <div className="pswp__item"/>
                        </div>

                        <div className="pswp__ui pswp__ui--hidden">

                            <div className="pswp__top-bar">

                                <div className="pswp__counter"/>

                                <button className="pswp__button pswp__button--close" title="Close (Esc)"/>

                                <button className="pswp__button pswp__button--share" title="Share"/>

                                <button className="pswp__button pswp__button--fs" title="Toggle fullscreen"/>

                                <button className="pswp__button pswp__button--zoom" title="Zoom in/out"/>

                                <div className="pswp__preloader">
                                    <div className="pswp__preloader__icn">
                                        <div className="pswp__preloader__cut">
                                            <div className="pswp__preloader__donut"/>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                                <div className="pswp__share-tooltip"/>
                            </div>

                            <button className="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"/>

                            <button className="pswp__button pswp__button--arrow--right" title="Next (arrow right)"/>

                            <div className="pswp__caption">
                                <div className="pswp__caption__center"/>
                            </div>

                        </div>

                    </div>

                </div>
                <style>{`
                    .ant-card-body img {
                        cursor: pointer;
                    }
                `}</style>
            </div>
        );
    }
}

const mapStateToPorps = state => {
    const {auth} = state.httpData;
    return {auth};
};
const mapDispatchToProps = dispatch => ({
    fetchData: bindActionCreators(fetchData, dispatch),
    receiveData: bindActionCreators(receiveData, dispatch)
});


export default connect(mapStateToPorps, mapDispatchToProps)(Form.create()(Gallery));